<template>
  <div>
    <!-- <myA />
    <myB /> -->
    <input type="text" v-model="todo" @keydown.enter="add">
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
import myA from './components/A'
import myB from './components/B'
import { mapState } from 'vuex'
export default {
  name: 'XXX',
  data() {
    return {
      todo: '',
    }
  },
  created() {
    console.log(this.$store.state)
  },
  components: {
    myA, myB
  },
  methods: {
    add() {
      let ary = [{ text: this.todo, id: Math.random() }, ...this.list]
      this.$store.commit('myA/changeList', ary)
      this.todo = ''
    }
  },
  computed: {
    ...mapState('myA', ['list'])
  }
}
</script>
<style lang="less">
</style>